<template>
	<view class="content">
		<view class="head" >
			<image class="logo" src="~@/static/iconfont/header.png"></image>
			<view class="head_text">{{name}}</view>
		</view>
		<view class="resource_nav">
		<uni-card 
			    title="资源管理" 
			    mode="title" 
			    :is-shadow="true" 
			    thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg" 
			>
			<view class="uni-flex uni-row eco-flex-wrap" >
				<block v-for="(item,index) in resoucres" :key="item.id">
					<view class="resouce_item">
						<navigator class="res_item_text" :url="item.url">
							<view :class="item.icon"></view>
							<text>{{item.name}}</text>
						</navigator>
					</view>
				</block>
			</view>
		</uni-card>
</view>
<view class="resource_nav">
		<uni-card 
			    title="营销工具" 
			    mode="title" 
			    :is-shadow="true" 
			    thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg" 
			>
			<view class="uni-flex uni-row eco-flex-wrap">
				<block v-for="(item,index) in tools" :key="item.key">
					<view class="tools_item">
						<navigator  class="res_item_text" :url="item.url">
							<view :class="item.icon"></view>
							<text>{{item.name}}</text>
						</navigator>
					</view>
				</block>
			</view>
		</uni-card>
</view>
<view>
	<block v-for="(item ,index) in info" :key="index">
		<uni-charts class="uni-charts" :title="item.title" 
			:thumbnail="'/static/images/charts/'+item.images" 
			bgcolor='#f7f7fa' 
			:images="item.demo" 
			:texts="item.texts"  
			@click="clickCard(item.url)" 
			>
		</uni-charts>
	</block>
</view>

	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue'
	import uniCharts from '@/components/uni-ui/uni-card/uni-card.vue'
	export default {
		components: {uniCard,uniCharts},
		data() {
			return {
				title: '',
				name: "",
				memberCard:"",
				info: [],
				resoucres:[
				],
				tools:[
				]
			}
		},
		onLoad() {
			this.getHomePageData()
		},
		methods: {
			clickCard(url) {
							uni.navigateTo({
								url: url
							});
						},
			async getHomePageData(){
				const res = await this.$myRequest({
					url:"/api/homepage"
				})
				this.resoucres = res.data.resoucres,
				this.title  = res.data.title,
				this.name = res.data.name,
				this.memberCard = res.data.memberCard,
				this.info = res.data.info,
				this.tools = res.data.tools
			}
		}
	}
</script>

<style>
	.head{
		background-color: #F0AD4E;
		width: 100%;
		height: 160rpx;
		border-radius: 0rpx 0rpx 40rpx 40rpx;
	}
	.logo {
		height: 100rpx;
		width: 100rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: auto;
		margin-bottom: auto;
	}
	.head_text{
		float: right;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		margin-top: 25rpx;
		margin-right: 300rpx;
		color: #DD524D;
		font-size: 36rpx;
	}
	.uni-card{
		margin-top: 10rpx;
		border-radius: 20rpx;
	}
	.uni-charts{
		border-radius: 50rpx;
	}
	.resource_nav{
		width: 100%;
		height: 10%;
	}

	.resouce_item {
		width: 25%;
		text-align: center;
	}
	.tools_item {
		width: 20%;
		text-align: center;
	}
	.iconfont_ext {
		width: 60rpx;
		height: 60rpx;
		background-color: #EE0000;
		border-radius: 30rpx;
		margin: 3px auto;
		line-height: 60rpx;
		color: #FFFFFF; 
		font-size: 40rpx;
	}
	.shop_report{
		width: 100%;
		height: 150rpx;
	}
	.res_item_text{
		font-size: 26rpx;
	}
	.eco-flex-wrap{
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
</style>
